<template>
    <div id="app">
        <HelloWorld msg="Welcome to Your Vue.js App" />
        <el-button @click="jumpUserNavigation">
            跳转到User页面(导航故障)
        </el-button>

        <!-- <el-button @click="jumpUserProfile">
            跳转到user-profile
        </el-button>

        <el-button @click="jumpUserPosts">
            跳转到user-posts
        </el-button> -->

        <!-- <el-radio v-model="radio" label="1">备选项</el-radio>
        <el-radio v-model="radio" label="2">备选项</el-radio> -->
    </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import VueRouter from 'vue-router'
const { isNavigationFailure, NavigationFailureType } = VueRouter

export default {
    name: 'App',
    components: {
        HelloWorld,
    },
    data() {
        return {
            radio: '1',
        }
    },
    watch: {
        radio(val){
            console.log('val',val);
        }
    },
    methods: {
        jumpUserProfile() {
            this.$router.push({
                path: '/user/profile'
            })
        },
        jumpUserPosts() {
            this.$router.push({
                path: '/user/posts'
            })  
        },
        jumpUserNavigation() {
            this.$router.push('user').catch(fail=>{
                console.log('fail',fail);
                //NavigationFailureType 区分不同类型的导航故障
                //(1)redirected 在导航守卫调用了next(newLoaction)重定向到其他地方。
                //(2)aborted 在导航守卫中调用了next(false)中断了本次导航。
                //(3)cancelled 在当前导航还没有完成之前又有了一个新的导航，比如，在等待导航守卫的过程中又调用了router.push
                //(4)duplicated 导航被阻止，因为我们已经在目标位置了。
                if (isNavigationFailure(fail, NavigationFailureType.aborted)) {
                    console.log('isNavigationFailure')
                }
            })
        }
    },
    //组件内守卫
    beforeRouteUpdate(to,from,next) {
        console.log(to,from,next);
    },
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
    background: #eee;
}
</style>
